<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
  <meta name="keywords" content="createContextMenu,addRemoveGroup" />
  <title>HERE Maps API Example: Adding a Context Menu to the Map</title>
  <!-- Set up constants such as APP ID and token -->
  <script type="text/javascript" src="libs/hereAppIdAndToken.js"></script>
  <!-- Bootstrap jQuery Library -->
  <script type="text/javascript" src="libs/jQl.min.js"></script>
  <!-- Asynchronously the HERE Maps API for JavaScript -->
  <script type="text/javascript" src="libs/hereAsyncLoader.js"
    id="HereMapsLoaderScript"
    data-map-container="mapContainer"
    data-params="maps"
    data-callback="createContextMenu" >
  </script>
  <link rel="icon" href="http://here.com/favicon.ico"/>
  <!--<link href="http://developer.here.com/html/css/main.css" rel="stylesheet" />-->
</head>
<body>
  <h1>Adding a Context Menu </h1>
  <p>The example displays a context menu when the map is right clicked, Further <code>alerts()</code>
     are displayed when the menu items are clicked.</p>
  <p>Use the button to add and remove additional menu items.</p>
  <input type = "button" id ="addRemove" value = "Add Menu Items" onclick = "addRemoveGroup(extraMenuItems)"/>
  <div id="mapContainer" style="width:540px; height:334px;"></div>
<script id="example-code" data-categories="context-menu" type="text/javascript" >
//<![CDATA[
var isAdded = false,
  menuItems1,
  menuItems2,
  extraMenuItems,
  contextMenu;

function createContextMenu(map) {
  contextMenu = new nokia.maps.map.component.ContextMenu();

  /* Add Custom Context Menu Items */

  //This adds three items with a menu separator
  menuItems1 = function (contextMenuEvent, group) {
    group.addEntry("Menu Item 1",
      function (activationEvent) {alert("Menu Item 1 clicked"); });
    group.addEntry("Menu Item 2",
      function (activationEvent) {alert("Menu Item 2 clicked"); });
    group.addEntry("Menu Item 3",
      function (activationEvent) {alert("Menu Item 3 clicked"); });
  };
  //This adds one item with a menu separator
  menuItems2 = function (contextMenuEvent, group) {
    group.addEntry("Menu Item 4",
      function (activationEvent) {alert("Menu Item 4 clicked"); });
  };

  //Two extra items added with a menu separator when Add/Remove button clicked
  extraMenuItems = function (contextMenuEvent, group) {
    group.addEntry("Menu Item 5",
        function (activationEvent) {alert("Menu Item 5 clicked"); });
    group.addEntry("Menu Item 6",
        function (activationEvent) {alert("Menu Item 6 clicked"); });
  };

  contextMenu.addHandler(menuItems1);
  contextMenu.addHandler(menuItems2);
  map.components.add(contextMenu);
}


 // Simple function to add/remove a group of menu items...
function addRemoveGroup(handler) {
  if (isAdded === false) {
    contextMenu.addHandler(handler);
    $('#addRemove').prop('value', 'Remove Menu Items');
    isAdded = true;
  } else {
    contextMenu.removeHandler(handler);
    $('#addRemove').prop('value', 'Add Menu Items');
    isAdded = false;
 }
}
//]]>
</script>
<script type="text/javascript" src="libs/prettyprint.js"></script>
</body>
</html>